<template>
  <div class="map">
    <div class="canvas" ref="chartsDOM"></div>
<!--    <div class="button" @click="backToCity" v-if="level">返回</div>-->


  </div>


</template>

<script >
import * as echarts from 'echarts';
// import GetqujingMap from '@/api/MapApi/GetqujingMap'   //获取远程地图数据 需联网
import axios from 'axios'


  export default {
    name:'ExamineMap',
    data(){
      return{
        MapChart:null,  //地图对象
        //存储县区数据
        // county_data: {},
        //地图级别
        level:0,    //0表示市级，1表示县级

        //地图文件
        mapfile:['曲靖','会泽','宣威','沾益','马龙','麒麟','富源','陆良','罗平','师宗'],

        //每个地图板块颜色
        townColor:{},

        //作答弹窗状态
        answer_pop: false,
        //单击区域的地点名称
        mapname:null,
        //输入文本
        input_text:null,
        input_color:'',

        //成绩
        grade:0,
        //区段分数
        fraction:10
      }
    },
    components: {},
    mounted() {
      this.initChart();  //绘制地图图表
      //加载
      this.drawCityMap();  //绘制曲靖地图
    },
    computed:{
      examine_status(){
        return this.$store.state.examine_status
      }
    },
    methods:{

      //检测窗口变化 重绘制图表
      handleResize(){
        if (this.MapChart) {
          this.MapChart.resize();
        }
      },
      //初始化加载地图
      initChart(){
        //初始化地图对象
        this.MapChart = echarts.init(this.$refs['chartsDOM']);
        //窗口大小改变时重绘图表
        // window.addEventListener('resize',()=>{
        //   this.chart.resize()
        // })
        // this.handleResize = debounce(() => {})

      },

      //初始化绘制曲靖市地图
      drawCityMap(){
        //获取本地的地图json数据
        const qujingMap = axios.get('/map_json/曲靖市.json');
        // console.log('曲靖地图对象：',qujingMap)

        //显示loading动画
        // this.MapChart.showLoading()
        // console.log('qujingmap:',qujingMap)
        //根据获取的地图数据绘制地图
        qujingMap.then(res => {
          //为地图添加随机颜色
          // let dataArray=[]   //地图板块数据
          // for(let i=0;i<res.data.features.length;i++){
          //  let itemData =res.data.features[i];  //遍历板块数据
          //   //重构数据格式，添加随机颜色
          //  dataArray.push({name:itemData.properties.name,value: itemData.properties.adcode,itemStyle:{areaColor:this.getRandomColor()}})
          // }
          //重构不同颜色
          let dataArray = this.assignColors(res)
          //县区数据存储
          // this.county_data = this.get_county_data(res)
          //获取数据后关闭loading动画
          // this.MapChart.hideLoading();
          //注册地图
          echarts.registerMap('qj',res.data);
          //设置地图层级为0代表市级
          this.level = 0;
          const option = {
            title:{
              text:'市级行政区'+'('+'曲靖市'+')',
              left: '10vw', // 确保标题可见
              top:'10vh',
              textStyle: {
                color: 'black', // 修改为你想要的颜色（如 '#ff0000' 表示红色）
                // fontSize: 16,  // 可选：调整字体大小
                // fontWeight: 'bold' // 可选：调整字体粗细
              }
            },
            tooltip:{
              show:false    //不显示提示信息
            },   //配置提示框
            series: [
              {
                name: '曲靖地图',
                type:'map',
                map:'qj',
                roam:false,  //允许缩放平移
                label:{
                  color:'#FFFFFF',
                  show:false
                },
                itemStyle:{
                  borderColor:'rgb(0,0,0)',
                  shadowColor:'#09ec14',
                  // shadowColor:'rgb(0,0,0)',
                  shadowBlur: 10,
                },
                data:dataArray,
                // data:[
                //   {name:'会泽县',value: 530326,itemStyle:{areaColor: '#EE8262'}},
                //   {name:'宣威市',value: 530381,itemStyle:{areaColor: '#66CDAA'}},
                //   {name:'沾益区',value: 530303,itemStyle:{areaColor: '#CD6090'}},
                //   {name:'马龙区',value: 530304,itemStyle:{areaColor: '#7B68EE'}},
                //   {name:'麒麟区',value: 530302,itemStyle:{areaColor: '#00FF00'}},
                //   {name:'富源县',value: 530325,itemStyle:{areaColor: '#CD5C5C'}},
                //   {name:'陆良县',value: 530322,itemStyle:{areaColor: '#EEB4B4'}},
                //   {name:'罗平县',value: 530324,itemStyle:{areaColor: '#48D1CC'}},
                //   {name:'师宗县',value: 530323,itemStyle:{areaColor: '#FF11FF'}}
                // ],

                //鼠标悬停配置
                emphasis:{
                  label:{
                    show:false
                  },
                  itemStyle:{
                    areaColor: '#FF0000', //悬停颜色
                    shadowColor:'#000000',
                    shadowBlur:30,
                  }
                },
                selectedMode:false
              }
            ],
          };
          this.MapChart.setOption(option);
          // window.addEventListener('resize',()=>  this.MapChart.resize())
          //为地图县区板块绑定鼠标滑动事件
          // this.MapChart.on('mouseover', this.handleMapHove);
          //阻止浏览器默认右键事件
          document.oncontextmenu = function (){
            return false
          }
          //监听鼠标左键事件
          this.MapChart.on('click',this.ToCountyMapClick)
          //监听鼠标右键事件
          this.MapChart.on('contextmenu',this.ShowPopClick)
          //鼠标双击
          // this.MapChart.on('dblclick',this.backToCity)
          }).catch(error => {
            console.error('地图数据加载错误:', error);
            this.MapChart.hideLoading();
          });
      },

      //绘制乡镇街道地图地图
      drawCountyMap(map_name){
        // this.MapChart.showLoading()  //展示加载状态
        //获取本地的地图json数据
        const CountyMap = axios.get('/map_json/'+map_name+'.json');
        //显示loading动画
        // this.MapChart.showLoading()
        //根据获取的地图数据绘制地图
        CountyMap.then(res => {

        //重构乡镇数据并随机颜色
        let dataArray = this.assignColors(res)
        // this.county_data = this.get_county_data(res)
        //获取数据后关闭loading动画
        // this.MapChart.hideLoading();
        //注册地图
        echarts.registerMap('county',res.data);
        //设置地图层级为1代表县区级
        this.level = 1;
        const option = {
            title:{
              text:'县区级行政区'+'('+map_name+')',
            },
            tooltip:{},   //配置提示框
            series: [
              {
                name: '乡镇地图',
                type:'map',
                map:'county',
                label:{
                  color:'#FFFFFF',
                  show:false
                },
                data:dataArray,
                emphasis:{
                  itemStyle:{
                    areaColor: '#FF0000',
                  }
                }
              }
            ],
          };
          this.MapChart.setOption(option);
          //点击空白区域返回上级行政区实现
          // this.chart.off('click');  //移除先前点击事件
          // this.chart.off('mouseover');  //移除先前滑动事件
          // this.MapChart.on('click',this.handleCountyMapClick);
          //绑定鼠标点击事件
          // this.MapChart.on('click',this.handleCountyMapClick)
          // }).catch(error => {
          //   console.error('地图数据加载错误:', error);
          //   this.MapChart.hideLoading();
          //
        })

      },


      //  生成随机颜色
      getRandomColor(){
        return `#${Math.floor(Math.random() * 0xffffff).toString(16).padStart(6,'0')}`;
      },
      //重构乡镇数据并分配颜色
      assignColors(res){
        //为地图添加随机颜色
          let dataArray=[]   //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
           let itemData =res.data.features[i];  //遍历板块数据
            //重构数据格式，添加随机颜色
           dataArray.push({name:itemData.properties.name,value: itemData.properties.adcode,itemStyle:{areaColor:this.getRandomColor()}})
          }
          return dataArray
      },

      //获取曲靖市各县区数据
      get_county_data(res){
        // console.log('res:',res)
        let county_data= []    //地图板块数据
          for(let i=0;i<res.data.features.length;i++){
           let county_name =res.data.features[i].properties.name;  //遍历板块数据
            //重构数据格式，添加随机颜色
           county_data.push(county_name)
          }
          // console.log('county_data:',county_data)
          return county_data
      },


      //鼠标左键事件-显示弹窗
      ShowPopClick(params){
        // console.log('单击地点：',params.name)
        //地点名传到data
        this.mapname = params.name
        //开启弹窗
        this.answer_pop = true
        this.$store.commit('setanswer_pop',this.answer_pop)
        //单击区域传回作答页面
        this.$store.commit('setanswer_text',this.mapname)
      },

      //鼠标左键-进入乡镇级地图
      ToCountyMapClick(params){
        // console.log('点击了地图：',params.name)
        // console.log('地图对象：',params)
        //判断地图层级
        if( this.level === 0){
          //当前处于市级地图，点击下钻
          //判断是否点击到地图元素
          if(params.name){
            // console.log('当前处于市级地图：',params.name)
            //回收县区级地图
            // this.MapChart.dispos()
            //绘制所点击的地图
            this.drawCountyMap(params.name);
          }
        //判断是否处于县区级地图
        }else if( this.level === 1){
          this.backToCity()
        }
      },


      //县区级地图点击事件
      // handleCountyMapClick(params){
      //   console.log('当前处于县区级地图，地图级别：',this.level)
      //     console.log('当前地图对象：',params)
      //     //处于县区级地图，判断是否处于空白区域
      //     if (!params){
      //       console.log('正在点击空白区域：',params)
      //       //空白区域
      //       this.drawCityMap()
      //     }
      // },


      //市级地图点击事件
      // handleCityMapClick(params){
      //     if(params.name){
      //       //绘制所点击的地图
      //       this.drawCountyMap(params.name);
      //     }
      // },
      //县区级地图点击返回上级事件
      backToCity(){
        // console.log('点击了返回')
        this.drawCityMap()
      },


      //鼠标滑动
      /*
      handleMapHove(params){
        console.log(params.name,'被滑过了')
        if(params.data){
          const cityName = params.data.name;
          const cityinfo = this.cityData[cityName] ||{};

          //更新城市信息
          this.show_cityData = {
            name:cityName,
            introduction: cityinfo || '暂无数据',
          }
          // console.log('鼠标滑过',this.show_cityData.name,',信息：',this.show_cityData.introduction)
          //传递数据至父组件
          this.sendcityDataToTrainPage();
        }else{
            console.log('没有获取到城市信息')
          }
      },

       */
      //传递鼠标滑过匹配的数据到父组件
      // sendcityDataToTrainPage(){
      //   this.$emit('mousehoveShowCityinfo',this.show_cityData)
      // },




    }
}
</script>

<!--<style scoped>-->
<!--  @import url('@/assets/ecss/ExamineMapCSS.ecss');-->
<!--</style>-->
<style scoped>
  .map{
    width: 100%;
    height: 100%;
    /*background-color: red;*/
    box-sizing: border-box;
  }
  .canvas{
    width: 50vw;
    height: 94vh;
    /*background-color: greenyellow;*/
    position: absolute;
    /*left: calc(50% - 25vw);*/
    overflow: hidden;
    box-sizing: border-box;
    border: 1px black dashed;
    border-radius: 10px;
}
  .county{
    width: 50vw;
    height: 95vh;
    background-color: red;
    //position: absolute;
    //left: calc(50% - 400px);
    position: absolute;
    left: calc(50% - 25vw);
    //z-index: 2;
  }

  .button{
    width: 3vw;
    height: 4vh;
    border-radius:10px;
    background-color: #abe256;
    /*float: left;*/
    position: relative;
    /*float: left;*/
    top: 0vh;
    left: -35vw;
    text-align: center;
    line-height:4vh;
    //font-size: 1vh;
    overflow: hidden;
    box-shadow: 2px 2px 2px 2px #abe256;
  }
  .button:hover{
    color: #00ff00;
    cursor:pointer;
    background-color:yellow;
    //text-decoration: underline;
  }
  .button:active{
    color: red;
    box-sizing: border-box;
    position: relative;
    /*float: left;*/
    top: 0.5vh;
    /*left: 0.5vw;*/
    /*margin-top: 5px;*/
    /*margin-left: 3px;*/
    //box-shadow: 2px 2px 2px 2px yellow;
  }
  /*.answer_pop{*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background-color: rgba(0,0,0,0.3);*/
  /*  position: relative;*/
  /*}*/
  /*.answer{*/
  /*  width: 7vw;*/
  /*  height: 15vh;*/
  /*  background-color: #e2e5e2;*/
  /*  position: relative;*/
  /*  top: 30vh;*/
  /*  left: calc(50% - 3.5vw);*/
  /*  border-radius: 30px;*/
  /*  overflow: hidden;*/
  /*}*/
  /*.answer_top{*/
  /*  width: 100%;*/
  /*  height: 60%;*/
  /*  //background-color: #c1945f;*/
  /*}*/
  /*.answer_bottom{*/
  /*  width: 100%;*/
  /*  height: 40%;*/
  /*  //background-color: #267a1f;*/
  /*  border-top: solid 1px black;*/
  /*}*/
  /*.answer_top input{*/
  /*  width: 4vw;*/
  /*  height: 5vh;*/
  /*  font-size: 0.8em;*/
  /*  //background-color: lime;*/
  /*  position: relative;*/
  /*  top: 25%;*/
  /*  left: calc(50% - 2vw);*/
  /*  text-align: center;*/
  /*  border-radius: 10px;*/
  /*  border: none;*/
  /*}*/
  /*.answer_top input:focus{*/
  /*  outline: none;*/
  /*  border: lime solid 1px;*/
  /*}*/
  /*.cancel{*/
  /*  width: 30%;*/
  /*  height: 50%;*/
  /*  background-color: #262b26;*/
  /*  border-radius:5px;*/
  /*  position: relative;*/
  /*  top: 20%;*/
  /*  left: calc(10%);*/
  /*  overflow: hidden;*/
  /*  text-align: center;*/
  /*  //line-height: 50%;*/
  /*  float: left;*/
  /*}*/
  /*.sure{*/
  /*  width: 30%;*/
  /*  height: 50%;*/
  /*  background-color: #262b26;*/
  /*  border-radius:5px;*/
  /*  position: relative;*/
  /*  top: 20%;*/
  /*  left: calc(30%);*/
  /*  overflow: hidden;*/
  /*  text-align: center;*/
  /*  //line-height: 50%;*/
  /*}*/
  /*.cancel:hover,.sure:hover{*/
  /*  cursor: pointer;*/
  /*  box-shadow: 1px 1px 1px 1px greenyellow;*/
  /*  color: yellow;*/
  /*}*/
  /*.cancel:active,.sure:active{*/
  /*  color: red;*/
  /*  box-shadow: 1px 1px 1px 1px red;*/
  /*}*/


  /*.mask{*/
  /*  width: 100%;*/
  /*  height: 100%;*/
  /*  background-color: rgba(0,0,0,0.4);*/
  /*  position: relative;*/
  /*}*/


</style>

